<template>
    <div class="activity-index">
				<div style="display: flex;justify-content: flex-end;">
					<el-button type="primary" round @click="showAddExpress">添加</el-button>
				</div>
        <el-table :data="companys" style="width: 100%">
            <el-table-column label="#" 
                             type="index"
                            :index="1">
            </el-table-column>

            <el-table-column label="快递公司" prop="name">
							<template slot-scope="scope">
									<img class="expressImg" :src="scope.row.img" alt="">
									<div>{{scope.row.name}}</div>
							</template>
            </el-table-column>
            <el-table-column label="地址" prop="addr">
            </el-table-column>
            <el-table-column label="已完成订单数" prop="number">
            </el-table-column>
            <el-table-column label="等级" prop="typeStr">
            </el-table-column>
            <el-table-column label="状态" prop="status">
							<template slot-scope="scope">
									{{scope.row.status==10?"不支持":"支持"}}
							</template>
            </el-table-column>
            <el-table-column label="创建时间" prop="createDate">
            </el-table-column>
            <el-table-column label="操作" prop="desc" width="160">
                <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="primary"
                      @click="showDetailModel(scope.$index, scope.row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
				
				<!-- 查看快递公司详细 -->
				<el-dialog
					title="快递公司详细"
					:visible.sync="userModel"
					width="30%"
					v-if="obj!=null">
					<el-form label-position="left" label-width="80px" class="uploadImg">
						<el-form-item label="图片">
							<el-upload
								class="avatar-uploader"
								action="https://xiangtanmarujizhawangluokejiyouxiangongsi.xyz/gzh/img/upload"
								:show-file-list="false"
								name='imgs'
								:on-success="handleAvatarSuccess"
								:before-upload="beforeAvatarUpload">
								<img v-if="obj.img" :src="obj.img" class="avatar">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</el-form-item>
						<el-form-item label="快递公司">
							<el-input v-model="obj.name"></el-input>
						</el-form-item>
						<el-form-item label="地址">
							<el-input v-model="obj.addr"></el-input>
						</el-form-item>
						<el-form-item label="完成数">
							<el-input v-model="obj.number"></el-input>
						</el-form-item>
						<el-form-item label="等级">
							<el-select  placeholder="请输选择等级" v-model="obj.type">
								<el-option label="普通" value="0"></el-option>
								<el-option label="中级" value="1"></el-option>
								<el-option label="高级" value="2"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="状态">
							<el-select  placeholder="请输选择等级" v-model="obj.status">
								<el-option label="支持" value="11"></el-option>
								<el-option label="不支持" value="10"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="创建时间">
							<el-input v-model="obj.createDate" disabled></el-input>
						</el-form-item>
					</el-form>
					<span slot="footer" class="dialog-footer">
						<el-button @click="updateExpress">修 改</el-button>
					</span>
				</el-dialog>
				
				<!-- 添加快递公司 -->
				<el-dialog
					title="请输入以下信息"
					:visible.sync="addModel"
					width="30%"
					>
					<el-form label-position="left" label-width="80px" class="uploadImg">
						<el-form-item label="图片">
							<el-upload
								class="avatar-uploader"
								action="https://xiangtanmarujizhawangluokejiyouxiangongsi.xyz/gzh/img/upload"
								:show-file-list="false"
								name='imgs'
								:on-success="AddAvatarSuccess"
								:before-upload="beforeAvatarUpload">
								<img v-if="addObj.img" :src="addObj.img" class="avatar">
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</el-form-item>
						<el-form-item label="快递公司">
							<el-input v-model="addObj.name"></el-input>
						</el-form-item>
						<el-form-item label="地址">
							<el-input v-model="addObj.addr"></el-input>
						</el-form-item>
						<el-form-item label="等级">
							<el-select  placeholder="请输选择等级" v-model="addObj.type">
								<el-option label="普通" value="0"></el-option>
								<el-option label="中级" value="1"></el-option>
								<el-option label="高级" value="2"></el-option>
							</el-select>
						</el-form-item>
					</el-form>
					<span slot="footer" class="dialog-footer">
						<el-button @click="addExpress">添 加</el-button>
					</span>
				</el-dialog>
    </div>
</template>
<script>
// @ 是 /src 的别名
export default {
    name: 'NoticeComponent',
    props: {

    },
    data() {
        return {
            companys: [],
						userModel:false,
						addModel: false,
						obj: null,
						addObj: {
							name:'',
							img: null,
							addr:'',
							type:''
						}
        }
    },
		created: function() {
			this._getCompanys()
		},
    methods: {
			_getCompanys() {
				let _this = this
				this.axios.get('/admin/express/list')
				.then(function(response) {
					console.log(response.data)
					let data  = response.data
					_this.companys = data
				});
			},
			showDetailModel(index,obj) {
				this.obj = obj
				this.userModel=true;
			},
			showAddExpress() {
				this.addModel = true;
			},
			// 添加快递公司
			addExpress() {
				this.axios.get('/admin/express/add?addr='+this.addObj.addr+'&name='+this.addObj.name
												+'&img='+this.addObj.img+'&type='+this.addObj.type)
				.then((res)=>{
					if(res.data.status==200) {
						this.$notify({
							title: '操作成功',
							message: '添加成功',
							type: 'success'
						});
						this.addModel = false
					}else {
						this.$notify({
							title: '操作失败',
							message: res.data.message,
							type: 'error'
						});
					}
				})
			},
			// 更新快递公司
			updateExpress() {
				this.axios.get('/admin/express/update?expressId='+this.obj.expressId+'&addr='+this.obj.addr+'&name='+this.obj.name
												+'&img='+this.obj.img+'&status='+this.obj.status+'&type='+this.obj.type)
				.then((res)=>{
					if(res.data.status==200) {
						this.$notify({
							title: '操作成功',
							message: '快递公司修改成功',
							type: 'success'
						});
						this.userModel = false
					}else {
						this.$notify({
							title: '操作失败',
							message: res.data.message,
							type: 'error'
						});
					}
				})
			},
			handleAvatarSuccess(res, file) {
        // this.imageUrl = URL.createObjectURL(file.raw);
				console.log(res)
				this.obj.img = res
      },
			AddAvatarSuccess(res) {
				this.addObj.img = res
			},
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

//         if (!isJPG) {
//           this.$message.error('上传头像图片只能是 JPG 格式!');
//         }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isLt2M;
      }
    }
}
</script>
<style scoped lang="styl">

.top
  position absolute
  top 0
  left 0
  font-size 8px
  color #fff
  padding 0 8px
  background #f32

.expressImg{
	width: 80px;
	height: 80px;
}

.uploadImg >>> .avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.uploadImg >>>  .avatar-uploader .el-upload:hover {
	border-color: #409EFF;
}
.uploadImg >>> .avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 80px;
	height: 80px;
	line-height: 80px;
	text-align: center;
}
.uploadImg >>> .avatar {
	width: 80px;
	height: 80px;
	display: block;
}
</style>